<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
    
    <style type="text/css">
        *{
        	margin:0;padding:0;
        }
        a
        {
        	text-decoration: none;opacity: 0;
        }
        .ul li
        {
        	list-style: none;position: absolute;top:0;display: none;
        }
        img{
        	width:1000px;height: 500px;
        }
        .ul
        {
            background: red;position: relative;width: 1000px;margin:50px auto;
        }
        .ul li:first-child
        {
        	display: block;
        }
        .left
        {
        	position: fixed;top:250px;color:green;font-size:50px;left:480px;
        }
        .right
        {
        	position: fixed;top:250px;color:green;font-size:50px;right:480px;
        }
        
        .list
        {
        	width:1000px;position: absolute;top:600px;left:800px;height:50px;
        }
        .list li
        {
        	list-style:disc!important;width:5%;float: left;cursor: pointer;
        }
        .active
        {
        	color: red!important;
        }
    </style>
</head>
<body>

   
   <div class="box">
   	    <ul class="ul">
   	   	    <li><img src="images/fish.jpg" alt=""></li>
   	   	    <li><img src="images/haixing.jpg" alt=""></li>
   	        <li><img src="images/xia.jpg" alt=""></li>
   	        <li><img src="images/dangao.jpg" alt=""></li>
   	        <li><img src="images/niunai.jpg" alt=""></li>
   	        <li><img src="images/latiao.jpg" alt=""></li>
   	        
   	    </ul>
        <a href="#" class="left"><</a>
   	    <a href="#" class="right">></a>
   	    <ul class="list">
   	    	<li class="active"></li>
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    </ul>
   </div>
	
</body>
</html>
<script type="text/javascript">
    //鼠标移入
	$('.box').mouseenter(function() {
		$('a').css('opacity',1);
	});

    //鼠标离开
	$('.box').mouseleave(function() {
		$('a').css('opacity',0);
	});

    //点击 右边按钮
    var count = 0; //计数器
    $('.right').click(function(){
        count++;
        var length = $('.ul li').length;  //自动获取li的长度
        if(count == length)
        {
        	count = 0;
        }
        //点击，显示对应的当前图片,其他的兄弟隐藏
        $('.ul li').eq(count).fadeIn().siblings().fadeOut();

        $('.list li').eq(count).addClass('active').siblings().removeClass('active');
    });

    //点击 左边按钮
    $('.left').click(function(){
        count--;
        var length = $('.ul li').length;  //自动获取li的长度
        if(count == -1)
        {
        	count = length - 1;
        }
        //点击，显示对应的当前图片,其他的兄弟隐藏
        $('.ul li').eq(count).fadeIn().siblings().fadeOut();

        $('.list li').eq(count).addClass('active').siblings().removeClass('active');
    });

    //给list li 注册点击事件
    $('.list li').click(function(){
        
        var idx = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');

        //点击，显示对应的当前图片,其他的兄弟隐藏
        $('.ul li').eq(idx).fadeIn().siblings().fadeOut();

    });
</script>